<template>
  <app-picker
    class="van-cell"
    :visible.sync="visible"
    :label.sync="codeName"
    :block="block"
    v-model="val"
    :columns="columns"
    v-bind="$attrs"
    :readonly="readonly"
    v-on="$listeners"
  >
    <van-field
      readonly
      :clickable="!readonly"
      v-model="codeName"
      :label="label"
      placeholder="请选择"
      :rules="rules"
      :inputAlign="inputAlign"
      :right-icon="rightIcon"
    ></van-field>
  </app-picker>
</template>

<script>
  export default {
    props: {
      value: {
        type: [String, Array],
        default: ""
      },
      columns: {
        type: Array,
        required: true
      },
      label: {
        type: String,
        required: ''
      },
      rules: {
        type: [Array]
      },
      block: {
        type: Boolean,
        default: true
      },
      rightIcon: {
        type: String,
        default: 'arrow'
      },
      inputAlign:{
        type: String,
        default: ''
      },
      formatLabel:{
        type: Function,
        default(v){
          return v
        }
      },
      readonly: {
        type: Boolean,
        default: false
      },
    },
    data(){
      return {
        codeName:'',
        visible:false,
        val:this.value
      }
    },
    watch: {
      visible(v,old){
        if(v===old){
          return
        }
        if(v){
          this.$emit('open')
        }else{
          this.$emit('close')
        }
        
      },
      value:{
          immediate:true,
          handler(v){
          this.val=v;
        }
      },
      val(v) {
        this.$emit('input',v)
      }
    },
    methods:{
     
    }
    
  }
</script>

<style lang="less" scoped>
</style>